<template>
  <div id='main'>
	<div class='leftMenu'>
		<router-link to='/goal'><img class='top-logo' src='./images/tangcusuan.png'/></router-link>
		<span class='monile-menu' @click='toggleMenu' ref='topMenu'></span>
		<ul class='menu' ref='menuList' @click='menuClick' :class='{hideMenu: initMenuDisplay }'>
			<li :class="{active:active === '/canvas'}"><router-link to='/canvas'>canvas交互</router-link></li>
			<li :class="{active:active === '/copy'}"><router-link to='/copy'>js复制</router-link></li>
			<li :class="{active:active === '/paste'}"><router-link to='/paste'>粘贴表格的坑</router-link></li>
			<li :class="{active:active === '/tcp'}"><router-link to='/tcp'>TCP</router-link></li>
			<li :class="{active:active === '/domRect'}"><router-link to='/domRect'>滚动懒加载一</router-link></li>
			<li :class="{active:active === '/sticky'}"><router-link to='/sticky'>sticky 固定表头</router-link></li>
			<li :class="{active:active === '/halfPixel'}"><router-link to='/halfPixel'>半像素</router-link></li>
			<li :class="{active:active === '/pointerEvents'}"><router-link to='/pointerEvents'>pointer-events点透</router-link></li>
			<li :class="{active:active === '/websocket'}"><router-link to='/websocket'>nginx代理websocket</router-link></li>
			<li :class="{active:active === '/proxy'}"><router-link to='/proxy'>defineProperty/proxy</router-link></li>
			<li :class="{active:active === '/worker'}"><router-link to='/worker'>worker</router-link></li>
			<li :class="{active:active === '/serviceWorker'}"><router-link to='/serviceWorker'>Service Worker</router-link></li>
			<li :class="{active:active === '/arrow'}"><router-link to='/arrow'>箭头函数</router-link></li>
			<li :class="{active:active === '/router'}"><router-link to='/router'>前端路由</router-link></li>
			<li :class="{active:active === '/domResize'}"><router-link to='/domResize'>监听DOM变化</router-link></li>
			<li :class="{active:active === '/loader'}"><router-link to='/loader'>自定义loaders</router-link></li>
			<li :class="{active:active === '/plugins'}"><router-link to='/plugins'>自定义plugins</router-link></li>
			<li :class="{active:active === '/webpack'}"><router-link to='/webpack'>webpack笔记</router-link></li>
			<li :class="{active:active === '/module'}"><router-link to='/module'>模块化</router-link></li>
			<li :class="{active:active === '/sourcemap'}"><router-link to='/sourcemap'>sourcemap</router-link></li>
			<li :class="{active:active === '/ast'}"><router-link to='/ast'>抽象语法树AST</router-link></li>
			<li :class="{active:active === '/postcss'}"><router-link to='/postcss'>postcss</router-link></li>
			<li :class="{active:active === '/dynamic'}"><router-link to='/dynamic'>动态规划</router-link></li>
		</ul>
	</div>
	<div class='right-content'>
		<router-view></router-view>
		<p class="copy-right">&copy; copyright 2021 <a href="https://beian.miit.gov.cn/#/Integrated/index">冀ICP备18032976号-1</a></p>
	</div>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop,Watch }from 'vue-property-decorator'

@Component({})
export default class App extends Vue {
  	active: string=''

  	@Watch('$route')
	tabType(newVal: string, oldVal: string) {
		this.active = this.$route.path;
	}
	created() {
		this.active = this.$route.path;

		fetch('/index.php', {
			method: 'GET',
			headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }
		}).then(function (response) {
			console.error(response);
			return response.text();
		}).then(res => {
			// console.error(res);
		})

			// let xml = new XMLHttpRequest();
			// xml.open("GET","/index.php",false);
			// xml.onreadystatechange = function () {
			//   if(xml.status == 200) {
			//     console.error(xml.responseText);
			//   }
			// }
			// xml.send();
	}

	initMenuDisplay: Boolean = true
	toggleMenu (): void {
		this.initMenuDisplay = !this.initMenuDisplay;
	}
	menuClick (e): void {
		this.initMenuDisplay = !this.initMenuDisplay;
	}
}

</script>

<style lang='scss'>
@import './src/css/main.scss';
</style>
